<template>
  <div>
    <!-- 头部插槽 -->
    <MainInHead>
      <template #left>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="点位管理：">
            <el-input v-model.trim="formInline.name" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="区域搜索：">
            <el-select v-model.trim="formInline.regionId" placeholder="请选择" clearable>
              <el-option
                v-for="item in currentPageRecords"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFn">查询</el-button>
            <el-button type="primary" @click="getPointDetail">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
    </MainInHead>
    <!-- 内容插槽 -->
    <MainInConter>
      <template #conter>
        <!-- 新建按钮 -->
        <el-button @click="addUserInfo"> <i class="el-icon-plus" /> 新建 </el-button>
        <!-- 表单控件 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="name" label="点位名称" />
          <el-table-column prop="region.name" label="所在区域" />
          <el-table-column prop="businessType.name" label="商圈类型" />
          <el-table-column prop="ownerName" label="合作商" />
          <el-table-column prop="addr" label="详细地址" />
          <el-table-column label="操作">
            <template #default="scoped">
              <el-link :underline="false" type="primary" @click.native="seeDetails(scoped.row.id)">查看详情</el-link>
              <el-link :underline="false" type="primary" @click.native="reviseInfo(scoped.row.id)">修改</el-link>
              <el-link :underline="false" type="danger" @click.native="delFn(scoped.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="+pageInfo.totalCount"
          @current-change="setcurrentPage"
        />
      </template>
    </MainInConter>
    <!-- 新建弹出框 -->
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="35%"
      @open="openFrom"
    >
      <!-- 表单区域 -->
      <el-form ref="addFrom" label-width="100px" :model="formLabelAlign" :rules="rules">
        <el-form-item label="点位名称:" prop="name">
          <el-input v-model="formLabelAlign.name" style="width: 90%;" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所在区域:" prop="region">
          <el-select v-model="formLabelAlign.region" placeholder="请选择" style="width: 90%;">
            <el-option
              v-for="item in currentPageRecords"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈:" prop="shopping">
          <el-select v-model="formLabelAlign.shopping" placeholder="请选择" style="width: 90%;">
            <el-option
              v-for="item in shoppingList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="partners">
          <el-select v-model="formLabelAlign.partners" placeholder="请选择" style="width: 90%;">
            <el-option
              v-for="item in partnersList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:" prop="address">
          <el-cascader
            ref="addListRef"
            v-model="formLabelAlign.address"
            :options="options"
            :props="{ expandTrigger: 'click',value: 'value',label: 'label' }"
            style="width: 90%;"
            @change="handleChange"
          />
          <!-- getCheckedNodes -->
        </el-form-item>
        <el-form-item label="备注:" prop="addrInfo">
          <el-input v-model="formLabelAlign.addrInfo" type="textarea" style="width: 90%;" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="submitFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看详情弹出框 -->
    <el-dialog
      title="详细信息"
      :visible.sync="seeDetailsIsShow"
      width="40%"
    >
      <el-table
        :data="pointcSeeDetailsInfo"
        style="width: 100%"
        height="500"
      >
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="innerCode" label="机器编号" />
        <el-table-column prop="vmStatusName" label="设备状态" />
        <el-table-column prop="lastSupplyTime" label="最后一供货时间" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="seeDetailsIsShow = false">取 消</el-button>
        <el-button type="primary" @click="seeDetailsIsShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入dayjs
// 引入城市联级选择器 , CodeToText, TextToCode
import { regionData } from 'element-china-area-data'
// 引入内容插槽
import MainInConter from '../../../components/SvgIcon/MainConter/MainInConter.vue'
// 引入tab表格
// 引入点位管理区域搜索,获取点位信息渲染taber栏,点位管理内的查看详情,所属商圈列表,点位管理合作商列表,新增点位信息,点位列表中修改数据,删除信息
import { getPointSearch, getPointInformation, seeDetailsInfo, getShoppingList, getPartnersList, addPointInfo, putPointInfo, delPoint } from '@/api'
export default {
  components: { MainInConter },
  data() {
    return {
      // 储存id
      putId: '',
      // 储存信息或者修改信息的标头
      title: '',
      // 储存查看详情中运营状态信息
      vmTypeInfo: { 0: '未投放', 1: '运营', 3: '撤机' },
      // 查看详情的弹出框
      seeDetailsIsShow: false,
      // 保存计算出来的详细地址
      detailedAddress: '',
      // 新增点位信息
      addPoin: {},
      // 保存级联选择器信息
      options: [],
      // 保存商圈信息列表
      shoppingList: [],
      // 保存合作商列表
      partnersList: [],
      // 绑定新建弹出层信息
      formLabelAlign: {
        name: '', // 点位名称
        region: '', // 所在区域
        shopping: '', // 所属商圈
        partners: '', // 归属合作商
        address: [], // 详细地址
        addrInfo: ''// 备注
      },
      // 弹出框表单校验规则
      rules: {
        name: [{ required: true, message: '请输入点位名称', tagger: 'blur' }],
        region: [{ required: true }],
        shopping: [{ required: true }],
        partners: [{ required: true }],
        address: [{ required: true }],
        addrInfo: [{ required: true, message: '请输入备注', tagger: 'blur' }]
      },
      // 控制新建弹出框弹出
      isShow: false,
      // 储存查看点位详情信息
      pointcSeeDetailsInfo: [],
      // 保存table栏数据
      tableData: [],
      // 保存点位管理区域搜索的渲染信息
      currentPageRecords: [],
      // 绑定表单数据
      formInline: {
        name: '',
        regionId: ''
      },
      // 保存页码数据
      pageInfo: {},
      // 传入信息渲染点位管理区域搜索
      params: {
        pageIndex: 1,
        pageSize: 100000
      }
    }
  },

  created() {
    this.getPointSearchInfo()// 获取页面区域搜索点位信息
    this.getPointDetail()// 渲染页面
  },
  methods: {
    // 删除信息
    async delFn(id) {
      await delPoint(id)
      this.getPointDetail()// 渲染页面
    },
    // 修改信息
    async reviseInfo(id) {
      this.isShow = true
      this.putId = id
      this.title = '修改信息'
      this.options = regionData
      console.log(this.tableData)
      const i = (this.tableData.filter(item => item.id === id))[0]
      this.formLabelAlign.name = i.name
      this.formLabelAlign.region = i.region.id
      this.formLabelAlign.shopping = i.businessType.id
      this.formLabelAlign.address = i.areaCode
      this.formLabelAlign.partners = i.ownerId
      this.formLabelAlign.addrInfo = i.ownerName
    },
    // 点击弹出框提交信息
    async submitFn() {
      console.log(this.tableData)
      console.log(this.formLabelAlign)
      if (this.title === '新建信息') {
        await addPointInfo({
          name: this.formLabelAlign.name, // 名称
          addr: this.detailedAddress + this.formLabelAlign.addrInfo, // 详细地址
          areaCode: this.addPoin.value, // 最后一级区域id
          createUserId: 1, // 创建人id
          regionId: this.formLabelAlign.region, // 所属区域id
          businessId: this.formLabelAlign.shopping,
          ownerId: this.formLabelAlign.partners,
          ownerName: this.formLabelAlign.addrInfo
        })
      } else {
        await putPointInfo(this.putId, {
          name: this.formLabelAlign.name, // 名称
          addr: this.detailedAddress + this.formLabelAlign.remark, // 详细地址
          areaCode: this.addPoin.value, // 最后一级区域id
          createUserId: 1, // 创建人id
          regionId: this.formLabelAlign.region, // 所属区域id
          businessId: this.formLabelAlign.shopping,
          ownerId: this.formLabelAlign.partners,
          ownerName: this.formLabelAlign.remark
        }
        )
      }
      console.log(this.formLabelAlign)
      this.$refs.addFrom.resetFields()
      this.getPointDetail()
      this.isShow = false
    },
    // 当级联选择器发生改变时
    handleChange(val) {
      this.formLabelAlign.address = val
      // 当级联选择器发生改变把改变后的数据保存到变量中
      this.addPoin = this.$refs.addListRef.getCheckedNodes()[0]
      // console.log(this.addPoin)
      const sum = this.addPoin.pathLabels.reduce((prve, item) => {
        return (prve += (item + '-'))
      }, '')
      this.detailedAddress = sum
    },
    // 打开对话框触发
    async openFrom() {
      // 所属商圈列表
      const res1 = await getShoppingList()
      // 点位管理合作商列表
      const res2 = await getPartnersList({
        pageIndex: 1,
        pageSize: 100000
      })
      this.shoppingList = res1 // 所属商圈列表
      this.partnersList = res2.currentPageRecords // 点位管理合作商列表
    },
    // 点击新建信息
    addUserInfo() {
      this.isShow = true
      this.title = '新建信息'
      this.options = regionData// 要渲染的数据
    },
    // 点击查看详情渲染的数据
    async seeDetails(id) {
      this.seeDetailsIsShow = true
      const res = await seeDetailsInfo(id)
      this.pointcSeeDetailsInfo = res
      this.pointcSeeDetailsInfo.forEach(item => {
        item.lastSupplyTime = item.lastSupplyTime.replace(/T/g, ' ')
        // console.log(item.vmStatus)
        item.vmStatusName = this.vmTypeInfo[item.vmStatus]
        // console.log(this.vmTypeInfo[item.vmStatus])
      })
      // console.log(this.pointcSeeDetailsInfo)
    },
    // 点击查询渲染数据
    async  searchFn() {
      let res = {}
      if (this.formInline.name) {
        res = await getPointInformation({
          pageIndex: this.pageInfo.pageIndex, // 当前页
          pageSize: this.pageInfo.pageSize, // 一页多少数据
          name: this.formInline.name// 当前搜索信息
        })
      } else {
        res = await getPointInformation({
          pageIndex: this.pageInfo.pageIndex, // 当前页
          pageSize: this.pageInfo.pageSize, // 一页多少数据
          regionId: this.formInline.regionId // 当前选项id
        })
      }
      this.tableData = res.currentPageRecords
      this.pageInfo.totalCount = res.totalCount
      this.pageInfo.totalPage = res.totalPage
    },
    // 获取点位管理区域搜索
    async getPointSearchInfo() {
      const res = await getPointSearch(this.params)
      // console.log(res)
      this.currentPageRecords = res.currentPageRecords
    },
    // 调用保存页面主体数据
    async getPointDetail() {
      const res = await getPointInformation({
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize
      })
      this.tableData = res.currentPageRecords
      this.tableData.forEach(item => { item.addrInfo = item.addr.slice(12) })
      // console.log(this.tableData)
      this.pageInfo.pageIndex = res.pageIndex// 第几页
      this.pageInfo.pageSize = res.pageSize// 一页多少条数据
      this.pageInfo.totalCount = res.totalCount// 一共多少数据
      this.pageInfo.totalPage = res.totalPage// 一共多少页
      // console.log(this.pageInfo)
    },
    // 当前页码值发生改变触发，重新渲染数据
    setcurrentPage(val) {
      this.pageInfo.pageIndex = val
      this.getPointDetail()
    }
  }
}

</script>

<style scoped lang="scss">
.el-form{
  margin-top: -6px;
}
.el-button {
  background-color: #8e76a2;
  border: 1px solid #fff;
  color: #fff;
}
.el-link{
  margin-left: 20px;
  color: #8e76a2;
}
.el-pagination{
  margin-top: 20px;
}
.el-table{
  margin-top: 20px;
}
::v-deep .active{
  background-color: #8e76a2 !important;
  color: #fff;
}
::v-deep .el-dialog__header{
  background-color: #fff;
}
::v-deep .el-dialog__title{
  color: #000;
}
::v-deep .el-dialog{
  border-radius: 10px ;
  overflow: hidden ;
}
</style>
